<template>
  <section>
    <el-form label-width="80px">
      <el-form-item label="标题">
        <el-input size="mini" v-model="activityForm.title" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="起止时间">
        <el-row>
          <el-col :span="11">
            <el-date-picker size="mini" v-model="activityForm.start" type="datetime"
                            placeholder="选择日期时间" default-time="12:00:00"
                            format="yyyy-MM-dd HH:mm:ss" value-format="timestamp">
            </el-date-picker>
          </el-col>
          <el-col :span="2">~</el-col>
          <el-col :span="10">
            <el-date-picker size="mini" v-model="activityForm.end" type="datetime"
                            placeholder="选择日期时间" default-time="12:00:00" value-format="timestamp"
                            format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="是否重复">
        <el-switch v-model="activityForm.repeatable"/>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" v-if="activity" type="success" @click="saveActBtn(activityForm)">保存</el-button>
        <el-button size="mini" v-else type="primary" @click="createActivityBtn(activityForm)">新建</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "activityEdit",
    props: ['department','activity'],
    data(){
      return{
        activityForm:{
          title:'',
          start:'',
          end:'',
          repeatable:false,
          departmentId:this.department.id,
          data:{}
        }
      }
    },
    created(){
      console.log('没有部门？？？？',this.department,this.activity)
      if(this.activity){
        this.activityForm=this.activity
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      createActivityBtn(form){
        console.log(form)
        let tmp={...form}
        tmp.start=dateFormater.formatDatetime(form.start)
        tmp.end=dateFormater.formatDatetime(form.end)
        tmp.departmentId= this.department.id
        this.createActivity(tmp)
      },
      createActivity(data){
        this.fetch({name:"createActivity",data})
          .then(res=>{
            console.log(res)
            this.$emit('cancel',res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      saveActBtn(form){
        form.start = dateFormater.formatDatetime(form.start)
        form.end = dateFormater.formatDatetime(form.end)
        this.updateActivity(form)
      },
      updateActivity(data){
        this.fetch({name:"updateActivity",data})
          .then(res=>{
            console.log(res)
            this.$emit('cancel',res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
